Adding Code and Content

Now we're ready to get to work on our page.

A picture of the toolbutton used for each procedure is shown below the procedure step. Menu commands and shortcut keys are listed for many of the procedures, as well.

Body tag

Our sample page is for a travel Web site. We want the site to be pleasing to the eye and easy to navigate, so we'll start by adding an attractive page background and then select a complementary color for the text.

Note To add Body content:
  1. Right-click inside the <BODY> tag and select Edit Tag from the menu to open the Body dialog box.

  2. Click the Browse button to the right of the Background Image text box.

  3. In the Open dialog box, select the image1.jpg file from the tutorial files folder and click Open.

    The file's name is inserted in the Background Image text box. Images are separate graphics files (usually with the gif or jpg extension) inserted into HTML documents. They can fill an entire page or be sized to fit just a portion of a page.

  4. Open the Text Color drop-down list and choose Navy.
  5. Click OK to apply your changes and close the Body dialog box.

    The resulting HTML code looks like this:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <HTML>
    HEAD>
        <TITLE>Archaeology Tours</TITLE>
    </HEAD>
    
    <BODY BACKGROUND="image1.jpg" TEXT="Navy">
    
    </BODY>
    </HTML>
    

Paragraph tag

The paragraph <P></P> tag is the most basic text container. Paragraphs appear in the browser with a blank line before them. Text inside paragraphs can be aligned to the left, center, or right.

Note To add a paragraph and enter text:
  1. Place the cursor on a line after the <BODY> tag line.

    Click the Paragraph button on the Common QuickBar or press Shift+Ctrl+P to insert a paragraph tag. The <P> tag does not require a closing tag, but you can check the Include closing </P> tag option in the Settings > HTML pane (F8) if you want one inserted.

  2. Type This page was created with HomeSite, which you can find at Allaire's Web site after the <P> tag.
  3. Click the Browse tab or press F12 to view your page.

  4. Click the Edit tab (F12) to return to the HTML code.

Let's make HomeSite stand out a bit in that sentence.

Bold tag

You can wrap a single character, a word, or a text block in the <B> tag to highlight it on the page.

Note To add bold formatting:
  1. Select the word HomeSite in the paragraph you just typed.
  2. Click the Bold button on the Common toolbar.

  3. Check it in Browse mode.

    That's better!

  4. Click the Save button on the Standard toolbar or select File > Save (Ctrl+S).

Next, you'll create a link from this paragraph to the Allaire Corporation's Web site.

Anchor tag

Hyperlinks, or links, are the heart of the World Wide Web. They enable you to move from page to page with the click of a mouse and they provide the connections between Web pages and other resources.

Links are created with the Anchor <A></A> tag and require the HREF attribute, which specifies the target page to which you are linking. Links are usually identified on a page by special link text formatting, such as a distinct color or underlining. Many sites also use images that are coded with the Anchor tag.

Note To insert a hyperlink:
  1. At the end of the line you just typed, select the text Allaire's Web site.
  2. Click the Anchor button on the Common QuickBar or press Shift+Ctrl+A to open the Anchor dialog box.

  3. Type http://www.allaire.com in the HREF box. The text you selected in step 1 displays in the Description box.
  4. Click OK to insert the link in your document.

    The line should now look like this:

    <P>This page was created with <B>HomeSite</B>, which you can find at 
    <A HREF="http://www.allaire.com">Allaire's Web site</A>.</P>
    

Image tag

We used an image file for the page background. Now we will place an image on the page by coding the <IMG> tag. Several attributes are available for the <IMG> tag, but only one is required, SRC, which specifies the image file path. The <IMG> tag doesn't require an end tag.

<IMG SRC="images/myimage.gif">

By default, an image is treated as an inline image, that is, the browser renders it as if it were a character in the line of text. The bottom of the image is aligned with the base of the line, and the image's position within the text will remain the same regardless of how the browser wraps the lines. You can set images off by themselves by placing them in separate paragraphs or table cells.

Note The image's source file is unaffected by changes made to an image's attributes in HomeSite.

Note To insert the Greek Column image:
  1. Place the cursor below the first paragraph and click the Image button on the Common QuickBar or press Shift+Ctrl+I to open the Image dialog box.

  2. Click the Browse button next to the Source box.
  3. Select greekcolumn.gif from the tutorial files folder and click Open.

    The greekcolumn.gif file name is entered in the Source box.

  4. Enter Greek Column in the Alt. Text box.

    This ensures that a text description of the image appears on the page if the image cannot be rendered.

  5. Select RIGHT from the Align drop-down list.

    This attribute forces the text to the left of the image.

  6. Click OK.

    The tag should look like this, although the WIDTH and HEIGHT values may differ:

        <IMG SRC="greekcolumn.gif" WIDTH=111 HEIGHT=187 BORDER=0
        ALIGN="RIGHT" ALT="Greek Column">
    

Heading tags

The next text in the page is a heading. HTML allows six levels of headings, ranging from <H1>, which produces the largest font, to <H6>, the smallest. Heading tags can contain formatting attributes, but we'll just accept the browser default for this one.

Note To insert the Archaeology Tours heading:
  1. Place the cursor on a line below the <IMG> tag.
  2. Click the H1 button on the Fonts QuickBar or select Tags > Heading 1.

  3. With the cursor between the <H1> and </H1> tags, type Archaeology Tours.

    The tag should look like this:

        <H1>Archaeology Tours</H1>
    

Horizontal Rule tag

Let's add a visual element to separate the heading from the next section. We'll accomplish this by adding a horizontal rule.

Note To add a horizontal rule:
  1. Place the cursor on a line below the heading.
  2. Click the Horizontal Rule button on the Common QuickBar or select Tags > Horizontal Rule to open the <HR> editor.

  3. Leave the Align option set to the default value, Center.
  4. Select the No Shading option.
  5. Enter 80% in the Width box (note that you can specify widths in percentages of the page width or in pixels)
  6. Click the Browser-specific tab and choose Black from the Color drop-down list.
  7. Click Apply.

    The code looks like this:

        <HR WIDTH="80%" COLOR="Black" NOSHADE>